<template>
  <div>
    <leftRightSplit :left-span="4">
      <el-card slot="left">
        <div slot="header">
          <span>表单分类</span>
        </div>
        <dicItemTree
          ref="dicItemTree"
          :dic-id="DictItemDic.formClassify"
          @change="chioseClassify"
          @load="loadClassify"
        />
      </el-card>
      <el-card slot="right">
        <div slot="header">
          <span>{{ title }}</span>
        </div>
        <el-row>
          <el-form :inline="true" :model="queryParam">
            <el-form-item label="表单名">
              <el-input
                v-model="queryParam.QueryKey"
                placeholder="表单名"
                @change="load"
              />
            </el-form-item>
            <el-form-item label="表单类型">
              <enumItem
                v-model="queryParam.FormType"
                :dic-key="EnumDic.FormType"
                placeholder="表单类型"
                :multiple="true"
                sys-head="form"
                @change="load"
              />
            </el-form-item>
            <el-form-item label="表单状态">
              <enumItem
                v-model="queryParam.Status"
                :dic-key="EnumDic.FormStatus"
                placeholder="表单状态"
                sys-head="form"
                :multiple="true"
                @change="load"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="checkPower('form.add')"
                type="success"
                @click="add"
              >添加表单</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <w-table
          :data="formList"
          :columns="columns"
          :is-paging="true"
          row-key="Id"
          :paging="paging"
          @load="load"
        >
          <template slot="formType" slot-scope="e">
            <span v-if="e.row.FormType == 0">自定义表单</span>
            <span v-else-if="e.row.FormType == 1">代理表单</span>
            <span v-else-if="e.row.FormType == 2">物理表</span>
            <span v-else-if="e.row.FormType == 3">视图</span>
          </template>
          <template slot="formClassify" slot-scope="e">
            {{ classify[e.row.FormClassify] }}
          </template>
          <template slot="createTime" slot-scope="e">
            {{ moment(e.row.CreateTime).format('YYYY-MM-DD HH:mm') }}
          </template>
          <template slot="status" slot-scope="e">
            <el-switch
              :disabled="checkPower('form.set') == false"
              :value="e.row.FormStatus == 1"
              active-text="启用"
              :inactive-text="e.row.FormStatus == 0 ? '起草' : '停用'"
              @change="(val)=> setStatus(e.row, val)"
            />
          </template>
          <template slot="action" slot-scope="e">
            <el-button
              v-if="e.row.FormType == 0"
              size="mini"
              type="default"
              title="预览"
              icon="el-icon-view"
              circle
              @click="show(e.row)"
            />
            <el-button
              v-if="e.row.FormType == 1 && checkPower('form.set')"
              size="mini"
              type="default"
              title="编辑页面路径"
              icon="el-icon-setting"
              circle
              @click="editPath(e.row)"
            />
            <el-button
              v-if="e.row.FormType == 1 && checkPower('form.set')"
              size="mini"
              type="primary"
              title="刷新表结构"
              icon="el-icon-refresh"
              circle
              @click="syncPhyBody(e.row)"
            />
            <el-button
              v-if="e.row.FormStatus !== 1 && checkPower('form.set')"
              size="mini"
              type="primary"
              title="编辑表单"
              icon="el-icon-edit"
              circle
              @click="edit(e.row)"
            />
            <el-button
              v-if="e.row.FormStatus !== 1 && e.row.FormType == 0 && checkPower('form.set')"
              size="mini"
              type="primary"
              title="编辑表单结构"
              icon="el-icon-setting"
              circle
              @click="editForm(e.row)"
            />
            <el-button
              v-if="e.row.FormStatus === 0 && e.row.FormType == 2 && checkPower('form.set')"
              size="mini"
              type="primary"
              title="编辑表单结构"
              icon="el-icon-setting"
              circle
              @click="editPhyForm(e.row)"
            />
            <el-button
              v-if="e.row.FormStatus !== 1 && e.row.FormType == 2 && checkPower('form.set')"
              size="mini"
              type="primary"
              title="编辑表筛选项"
              icon="el-icon-setting"
              circle
              @click="editPhyQuery(e.row)"
            />
            <el-button
              v-if="e.row.FormStatus !== 1 && e.row.FormType == 3 && checkPower('form.set')"
              size="mini"
              type="primary"
              title="编辑视图"
              icon="el-icon-setting"
              circle
              @click="editView(e.row)"
            />
            <el-button
              v-if="e.row.FormStatus === 0 && checkPower('form.delete')"
              size="mini"
              type="danger"
              title="删除表单"
              icon="el-icon-delete"
              circle
              @click="drop(e.row)"
            />
          </template>
        </w-table>
      </el-card>
    </leftRightSplit>
    <editForm :id="id" :form-classify="queryParam.FormClassify" :visible="visible" @close="close" />
    <formPreviewModel :form-id="id" :visible.sync="preVisible" />
    <editFormPage :form-id="id" :visible.sync="pageVisible" />
  </div>
</template>

<script>
import moment from 'moment'
import * as formApi from '@/customForm/api/form'
import {
  FormStatus,
  DictItemDic,
  EnumDic
} from '@/customForm/config/formConfig'
import dicItemTree from '@/components/base/dicItemTree.vue'
import editForm from './editForm.vue'
import formPreviewModel from '@/customForm/components/preview/formPreviewModel.vue'
import editFormPage from './components/editFormPage.vue'
export default {
  components: {
    dicItemTree,
    editForm,
    formPreviewModel,
    editFormPage
  },
  data() {
    return {
      DictItemDic,
      FormStatus,
      EnumDic,
      formList: [],
      preVisible: false,
      pageVisible: false,
      rolePower: [
        'form.add',
        'form.set',
        'form.delete'
      ],
      isShowChildren: false,
      title: '表单列表',
      classify: {},
      columns: [
        {
          key: 'FormName',
          title: '表单标题',
          align: 'left',
          minWidth: 200
        },
        {
          key: 'FormShow',
          title: '表单使用说明',
          align: 'right',
          minWidth: 200
        },
        {
          key: 'formClassify',
          title: '表单分类',
          align: 'center',
          slotName: 'formClassify',
          minWidth: 100
        },
        {
          key: 'FormStatus',
          title: '表单状态',
          align: 'center',
          slotName: 'status',
          minWidth: 140
        },
        {
          key: 'formType',
          title: '表单分类',
          align: 'center',
          slotName: 'formType',
          minWidth: 120
        },
        {
          key: 'TableName',
          title: '表名',
          align: 'center',
          minWidth: 120
        },
        {
          key: 'Ver',
          title: '版本号',
          align: 'center',
          width: 125,
          sortable: 'custom'
        },
        {
          key: 'CreateTime',
          title: '创建时间',
          align: 'center',
          slotName: 'createTime',
          sortable: 'custom',
          minWidth: 100
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          fixed: 'right',
          width: '180px',
          slotName: 'action'
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      visible: false,
      id: null,
      queryParam: {
        CompanyId: null,
        QueryKey: null,
        Status: null,
        FormType: null,
        FormClassify: null
      }
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  mounted() {
    this.initPower()
    this.title = '表单列表'
  },
  methods: {
    moment,
    close(isRefresh) {
      this.visible = false
      if (isRefresh) {
        this.load()
      }
    },
    show(row) {
      this.id = row.Id
      this.preVisible = true
    },
    async syncPhyBody(row) {
      await formApi.SyncPhyBody(row.Id)
      this.$message({
        type: 'success',
        message: '更新成功!'
      })
    },
    editPath(row) {
      this.id = row.Id
      this.pageVisible = true
    },
    loadClassify(e) {
      this.classify = e.text
      this.load()
    },
    async initPower() {
      this.rolePower = await this.$checkPower(this.rolePower)
    },
    checkPower(power) {
      return this.rolePower.includes(power)
    },
    editForm(row) {
      this.$router.push({ name: 'formBodyEdit', params: { id: row.Id }})
    },
    editPhyForm(row) {
      this.$router.push({ name: 'phyQueryTableEdit', params: { id: row.Id }})
    },
    editPhyQuery(row) {
      this.$router.push({ name: 'phyQueryEdit', params: { id: row.Id }})
    },
    editView(row) {
      this.$router.push({ name: 'editFormView', params: { id: row.Id }})
    },
    add() {
      this.id = null
      this.visible = true
    },
    async setStatus(row, isEnable) {
      if (isEnable) {
        await formApi.Enable(row.Id)
      } else {
        await formApi.Disable(row.Id)
      }
      this.$message({
        type: 'success',
        message: '设置成功!'
      })
      // eslint-disable-next-line require-atomic-updates
      row.FormStatus = isEnable ? 1 : 2
    },
    async load() {
      this.queryParam.CompanyId = this.comId
      const res = await formApi.Query(this.queryParam, this.paging)
      if (res.List) {
        this.formList = res.List
      } else {
        this.formList = []
      }
      this.paging.Total = res.Count
    },
    drop(row) {
      const title = '确认删除表单 ' + row.FormName + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await formApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.load()
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.queryParam.FormType = null
      this.paging.Index = 1
      this.load()
    },
    edit(row) {
      this.id = row.Id
      this.visible = true
    },
    chioseClassify(e) {
      if (e.value.length === 0) {
        this.queryParam.FormClassify = null
        this.title = '表单列表'
      } else {
        const item = e.value[0]
        this.queryParam.FormClassify = item.value
        this.title = item.text + '-表单列表'
      }
      this.load()
    }
  }
}
</script>
